<template>
  <div class="icons-list">
    <home-outlined/>
    <setting-filled/>
    <smile-outlined/>
    <sync-outlined spin/>
    <smile-outlined :rotate="180"/>
    <loading-outlined/>
    <smile-two-tone/>
    <heart-two-tone two-tone-color="#eb2f96"/>
    <check-circle-two-tone two-tone-color="#52c41a"/>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import {
  CheckCircleTwoTone,
  HeartTwoTone,
  HomeOutlined,
  LoadingOutlined,
  SettingFilled,
  SmileOutlined,
  SmileTwoTone,
  SyncOutlined
} from '@ant-design/icons-vue';

export default defineComponent({
  name: 'Icons',
  components: {
    HomeOutlined,
    SettingFilled,
    SmileOutlined,
    SyncOutlined,
    LoadingOutlined,
    SmileTwoTone,
    HeartTwoTone,
    CheckCircleTwoTone,
  },
});
</script>

<style scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>